<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .timeline-group {
      height: 50px;
      width: 100%;
    }
  </style>
</head>
<body>
<div class="timeline-group" id="timeline"></div>
<script src="timeline/timeline.js"></script>
<script>
console.log(TimeLine)
let times = [
  {
    begin: new Date(new Date('2022-04-14 11:30:00')).getTime(),
    end: new Date(new Date('2022-04-14 17:00:00')).getTime()
  },
  {
    begin: new Date(new Date('2022-04-14 17:01:00')).getTime(),
    end: new Date(new Date('2022-04-14 19:00:00')).getTime()
  }
]
let TimeAxis = new TimeLine({
  dom: document.getElementById('timeline'),
  bg: '#000',
  date: new Date(new Date('2022-04-14').toLocaleDateString()).getTime(),
  cellStyle: {
    background: 'rgba(24,208,217,0.5)'
  },
  timecell: [...times],
  callback: (data) => {
    // {mode: 触发方式 timestamp: 时间戳 valid: 是否有效}
    console.log(data)
    this.$emit('changeTime', data)
  }
})
</script>
</body>
</html>
